<template>
    <div class="manufacture-code-detail">
        <div class="detail-box">
            <div class="product-detail">
                <div class="detail-top">
                    <div class="product-picture">
                        <van-image
                            width="120"
                            height="120"
                            :src="repairDetail.coverpicture&&repairDetail.coverpicture[0].fileurl"
                        />
                    </div>
                    <div class="product-content">
                        <product-detail :detailData="repairDetail" />
                    </div>
                </div>
                <div class="detail-bottom">
                    <div class="time-content">
                        <time-arrow :detailData="repairDetail" />
                    </div>
                </div>
            </div>
            <div class="history-detail">
                <van-tabs
                    @click="getHistoryData"
                    v-model:active="activeName"
                    background="white"
                    title-active-color="#1890FF"
                    :line-width="tabWidth"
                    line-height="2"
                    class="detail-container">
                    <!-- 管理 -->
                    <van-tab
                        title="报警记录"
                        name="alarm">
                        <keep-alive>
                            <div
                                class="history-content-box">
                                <alarm-history
                                    :tempuuid="repairDetail.uuid"
                                    ref="deviceAlarmHistory" />
                            </div>
                        </keep-alive>
                    </van-tab>
                    <van-tab
                        title="维修记录"
                        name="repair">
                        <keep-alive>
                            <div
                                class="history-content-box">
                                <repair-history
                                    :manufacturecode="repairDetail.manufacturingcode"
                                    ref="deviceRepairHistory"  />
                            </div>
                        </keep-alive>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="button-div-fixed">
            <van-button
                class="submit-button"
                @click="newRepair">{{$st('wp-xin-jian-bao-xiu')}}</van-button>
        </div>
    </div>
</template>
<script>
import { apiService } from '../../../api/apiService';
import ProductDetail from './repaircommon/ProductDetail.vue';
import { getManufactureCodeDetail } from '../../../api/server';
import TimeArrow from './repaircommon/TimeArrow.vue';
import AlarmHistory from './repaircommon/AlarmHistory.vue';
import RepairHistory from './repaircommon/RepairHistory.vue';
import { ref, computed } from '@vue/reactivity';
// import { reactive, onBeforeMount, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { onMounted } from '@vue/runtime-core';
// import Cookies from 'js-cookie';
// import { selfI18n } from '@/i18n';
// import { useStore } from 'vuex';
// import { showError } from '@/util/MessageDeal.js';

export default {
    components: { ProductDetail, TimeArrow, AlarmHistory, RepairHistory },
    setup (props) {
        onMounted(() => {
            getDetail();
        });
        const deviceAlarmHistory = ref(null);
        const deviceRepairHistory = ref(null);
        const getHistoryData = (name) => {
            if (name === 'alarm') {
                // conso
                deviceAlarmHistory.value.onRefresh();
            } else {
                deviceRepairHistory.value.getDataByClick();
            }
        };
        const repairDetail = ref([]);
        const getDetail = () => {
            apiService({
                api: getManufactureCodeDetail,
                param: {
                    manufacturingcode: manucode
                },
                success: (data) => {
                    repairDetail.value = data.value;
                    console.log(repairDetail.value);
                    document.title = repairDetail.value.name;
                },
                fail: (data) => {
                }
            });
        };
        const tabWidth = computed(() => {
            const width = document.body.clientWidth / 2;
            return width || 40;
        });
        const activeName = ref('alarm');
        const route = useRoute();
        const manucode = route.query.manufacturecode;
        const router = useRouter();
        const newRepair = () => {
            router.push({
                path: 'createrepairorder',
                query: {
                    manufacturecode: repairDetail.value.manufacturingcode
                }
            });
        };
        return {
            deviceAlarmHistory,
            deviceRepairHistory,
            getHistoryData,
            newRepair,
            repairDetail,
            tabWidth,
            activeName,
            manucode
        };
    },
    data () {
        return {
        };
    },
    methods: {

    }
};
</script>
<style lang="scss">
.manufacture-code-detail{
    .detail-box{
        height: calc(100vh - 53px);
        overflow: auto;
        .product-detail{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
                background-color: white;
                height: 265px;
                .detail-top{
                    display: flex;
                    justify-content: center;
                    padding-top: 10px;
                    .product-picture{
                        width: 120px;
                        height: 120px;
                    }
                    .product-content{
                        width: calc(92vw - 120px);
                        height:  120px;
                        // background-color: rgb(136, 194, 136)
                    }
                }
                .detail-bottom{
                    display: flex;
                    justify-content: center;
                    padding-bottom: 10px;
                    .time-content{
                        width: calc(92vw);
                        height: 100px;
                        background-color: #f0f0f0;
                    }
                }
            }
            .history-detail{
                .van-tab {
                    border-bottom: solid;
                    border-width: 1px;
                    border-color: #DDDDDD;
                }
                height: calc(100vh - 338px);
                background-color: white;
                margin-top: 10px;
                .history-content-box{
                    height: calc(100vh - 372px);
                    overflow: auto;
                }
                .test{
                    height: 200px;
                    background-color: rgb(235, 208, 208);
                    margin-top: 20px;
                }
            }
    }
        .button-div-fixed{
        background-color: white;
        width: 100vw;
        position:fixed;
        height: 53px;
        padding-left: 15px;
        bottom: 0;
        .submit-button{
            width: calc(100vw - 30px);
            height: 40px;
            margin: 7px 0px 6px;
            font-size: 18px;
            opacity: 1;
            background: #1890ff;
            border-radius: 5px;
            vertical-align: middle;
            font-weight: Normal;
            text-align: CENTER;
            color: #ffffff;
        }
    }
}
</style>
